<template>
  <el-dialog
    :title="curid ? '修改' : '添加'"
    :visible.sync="obj.isshow"
    @opened="opened"
  >
    <el-form :model="form">
      <el-form-item
        :required="true"
        label="一级分类"
        :label-width="formLabelWidth"
      >
        <el-select
          v-model="form.first_cateid"
          placeholder="请选择一级分类"
          @change="selectsecond"
        >
          <el-option
            :label="item.catename"
            :value="item.id"
            v-for="(item, index) in allCateArr"
            :key="index"
            >{{ item.catename }}</el-option
          >
        </el-select>
      </el-form-item>
      <el-form-item
        :required="true"
        label="二级分类"
        :label-width="formLabelWidth"
      >
        <el-select v-model="form.second_cateid" placeholder="请选择二级分类">
          <el-option
            :label="item.catename"
            :value="item.id"
            v-for="(item, index) in secondCateArr"
            :key="index"
            >{{ item.catename }}</el-option
          >
        </el-select>
      </el-form-item>
      <el-form-item
        :required="true"
        label="商品名称"
        :label-width="formLabelWidth"
      >
        <el-input v-model="form.goodsname" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="价格" :label-width="formLabelWidth">
        <el-input v-model="form.price" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="市场价格" :label-width="formLabelWidth">
        <el-input v-model="form.market_price" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="图片" :label-width="formLabelWidth">
        <el-upload
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品规格" :label-width="formLabelWidth">
        <el-select v-model="form.specsid" placeholder="" @change="selectSpecs">
          <el-option
            :label="item.specsname"
            
            :value="item.id"
            v-for="(item, index) in allSpeces"
            :key="index"
            >{{ item.specsname }}</el-option
          >
        </el-select>
      </el-form-item>
      <el-form-item label="规格属性" :label-width="formLabelWidth">
        <el-select v-model="form.specsattr" placeholder=""   multiple>
          <el-option
       
            :label="item"
            :value="item"
            v-for="(item, index) in secondSpecs"
            :key="index"
            >{{ item }}</el-option
          >
        </el-select>
      </el-form-item>
      <el-form-item
        :required="true"
        label="是否新品"
        :label-width="formLabelWidth"
      >
        <el-radio v-model="form.isnew" :label="1">是</el-radio>
        <el-radio v-model="form.isnew" :label="2">否</el-radio>
      </el-form-item>
      <el-form-item
        :required="true"
        label="是否热卖"
        :label-width="formLabelWidth"
      >
        <el-radio v-model="form.ishot" :label="1">是</el-radio>
        <el-radio v-model="form.ishot" :label="2">否</el-radio>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-switch
          :active-value="1"
          :inactive-value="2"
          v-model="form.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="描述" :label-width="formLabelWidth">
        <div id="editor"></div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="canle">取 消</el-button>
      <el-button type="primary" v-if="curid == ''" @click="addGoods()"
        >确 定</el-button
      >
      <el-button type="primary" v-else @click="updateGoodes">编辑</el-button>
    </div>
  </el-dialog>
</template>

<script>
import E from "wangeditor";
import { successMsg, failedMsg } from "../../tools/tools.js";
import {
  cateList,
  goodsSpecs,
  goodsadd,
  goodsinfo,
  goodsedit,
} from "../../request/api.js";
export default {
  props: ["obj"],
  data() {
    return {
      curid: "",
      allCateArr: [], //所有商品分类
      secondCateArr: [],
      allSpeces: [], //所有商品属性
      secondSpecs: [],
      form: {
        first_cateid: "",
        second_cateid: "",
        goodsname: "",
        price: "",
        market_price: "",
        img: null,
        description: "",
        specsid: "",
        specsattr: [],
        isnew: 1,
        ishot: 1,
        status: 1,
      },
      formLabelWidth: "120px",
      imageUrl: "",
    };
  },
  methods: {
    updateGoodes() {
      this.form.description = this.editor.txt.html();
      let obj = {
        id: this.curid,
        ...this.form,
      };
      goodsedit(obj, true).then((d) => {
        if (d.data.code == 200) {
          successMsg("修改成功");
          this.empty();
          this.$emit("addGoods");
           this.editor.txt.html("");
          this.editor.destroy();
        } else {
          failedMsg(d.data.msg);
        }
      });
    },
    canle() {
      this.$emit("canle");
      this.empty();
      this.editor.txt.html("");
      this.curid = "";
      this.editor.destroy();
    },
    getOneInfo(id) {
      this.curid = id;

      goodsinfo({ id }).then((d) => {
        if (d.data.code == 200) {
          this.form = d.data.list;
          this.imageUrl = "http://localhost:3000" + d.data.list.img;
          this.editor.txt.html(d.data.list.description);
        }
      });
    },
    addGoods() {
      this.form.description = this.editor.txt.html();
      // console.log(this.form);
      goodsadd(this.form, true).then((d) => {
        if (d.data.code == 200) {
          successMsg(d.data.msg);
          this.empty();
          this.$emit("addGoods");
          this.editor.destroy();
        } else {
          failedMsg(d.data.msg);
        }
      });
    },
    selectSpecs() {
      this.secondSpecs = this.allSpeces.find(
        (item) => item.id == this.form.specsid
      ).attrs;
    },
    getSpeces() {
      goodsSpecs().then((d) => {
        if (d.data.code == 200) {
          this.allSpeces = d.data.list;
        }
      });
    },
    selectsecond() {
      this.secondCateArr = this.allCateArr.find(
        (item) => item.id == this.form.first_cateid
      ).children;
    },
    getGoosList() {
      cateList().then((d) => {
        if (d.data.code == 200) {
          this.allCateArr = d.data.list;
        }
      });
    },
    opened() {
      //创建编辑器对象
      this.editor = new E("#editor");
      this.editor.create();
    },
    beforeAvatarUpload(obj) {
      let fileObj = obj.raw;
      let { size, type } = fileObj;
      let typeArr = ["image/gif", "image/png", "image/jpg", "image/jpeg"];
      if (typeArr.indexOf(type) == -1) {
        failedMsg("只能上传.gif、.png、.jpg或.jpeg格式的图片");
        return false;
      }
      if (size > 2 * 1024 * 1024) {
        //文件大小不能超过2M
        failedMsg("文件大小不能超过2M");
        return false;
      }
      //将要上传的图片文件转换成图片路径并展示在界面上
      this.imageUrl = URL.createObjectURL(fileObj);
      //将用户要上传的图片文件数据赋值给this.form.img，这样当单击了"添加"按钮时才能要用户选择图片文件上传到服务器上
      this.form.img = fileObj;
      return;
    },
    empty() {
      (this.form = {
        first_cateid: "",
        second_cateid: "",
        goodsname: "",
        price: "",
        market_price: "",
        img: null,
        description: "",
        specsid: "",
        specsattr: [],
        isnew: 1,
        ishot: 1,
        status: 1,
      }),
        (this.imageUrl = "");
    },
  },
  mounted() {
    this.getGoosList();
    this.getSpeces();
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>